<template>
    <div class="journal">
        <search :searchKey.sync="searchKey" 
                enterButton="搜索期刊"
                placeholder="输入你感兴趣的期刊名或关键字"
                @search="search()"/>
        <div class="journal-container">
            <Tabs :animated="false" class="tabs" v-model="tabIndex" @on-click="reset">
                <TabPane label="CSSCI期刊" name="0">
                    <div class="journal-content">
                        <div class="journal-list">
                            <div><img src="../assets/qikan1.jpg" alt=""></div>
                            <div class="journal-info">
                                <div>
                                    <Icon type="md-list-box" size="22" />教育研究</div>
                                <div>
                                    <Icon type="md-time" size="16" /> ISSN：1002-5731</div>
                                <div>
                                    <Icon type="ios-keypad" size="16" /> 类型：期刊</div>
                                <div>领域：教育理论与教育管理、高等教育</div>
                            </div>
                        </div>
                        <div class="journal-list">
                            <div><img src="../assets/qikan2.jpg" alt=""></div>
                            <div class="journal-info">
                                <div>
                                    <Icon type="md-list-box" size="22" />中国电化教育</div>
                                <div>
                                    <Icon type="md-time" size="16" /> ISSN：1006-9860</div>
                                <div>
                                    <Icon type="ios-keypad" size="16" /> 类型： 期刊</div>
                                <div>领域：教育技术理论</div>
                            </div>
                        </div>
                        <div class="journal-list">
                            <div><img src="../assets/qikan3.jpg" alt=""></div>
                            <div class="journal-info">
                                <div>
                                    <Icon type="md-list-box" size="22" />电化教育研究</div>
                                <div>
                                    <Icon type="md-time" size="16" /> ISSN：1003-1553</div>
                                <div>
                                    <Icon type="ios-keypad" size="16" /> 类型： 期刊</div>
                                <div>领域：教育理论与教育管理</div>
                            </div>
                        </div>
                        <div class="journal-list">
                            <div><img src="../assets/qikan4.jpg" alt=""></div>
                            <div class="journal-info">
                                <div>
                                    <Icon type="md-list-box" size="22" />教育发展研究</div>
                                <div>
                                    <Icon type="md-time" size="16" /> ISSN：1008-3855</div>
                                <div>
                                    <Icon type="ios-keypad" size="16" /> 类型： 期刊</div>
                                <div>领域：教育理论与教育管理</div>
                            </div>
                        </div>
                        <div class="journal-list">
                            <div><img src="../assets/qikan5.jpg" alt=""></div>
                            <div class="journal-info">
                                <div>
                                    <Icon type="md-list-box" size="22" />中国教育学刊</div>
                                <div>
                                    <Icon type="md-time" size="16" /> ISSN：1002-4808</div>
                                <div>
                                    <Icon type="ios-keypad" size="16" /> 类型： 期刊</div>
                                <div>领域：教育理论与教育管理</div>
                            </div>
                        </div>
                        <div class="journal-list">
                            <div><img src="../assets/qikan6.jpg" alt=""></div>
                            <div class="journal-info">
                                <div>
                                    <Icon type="md-list-box" size="22" />课程·教材·教法</div>
                                <div>
                                    <Icon type="md-time" size="16" /> ISSN：1000-0186</div>
                                <div>
                                    <Icon type="ios-keypad" size="16" /> 类型： 期刊</div>
                                <div>领域：教育理论与教育管理</div>
                            </div>
                        </div>
                    </div>
                    
                </TabPane>
                <TabPane label="SSCI期刊" name="1">
                    <div class="journal-content">
                        <div class="journal-list">
                            <div><img src="../assets/qikan7.png" alt=""></div>
                            <div class="journal-info">
                                <div><Icon type="md-list-box" size="22" />Review of Educational Research</div>
                                <div><Icon type="md-time" size="16" /> ISSN：0034-6543</div>
                                <div><Icon type="ios-keypad" size="16" /> 复合影响因子：8.327</div>
                                <div><Icon type="ios-keypad" size="16" /> 自引量：2416</div>
                                <div><Icon type="ios-keypad" size="16" /> 载文量：112</div>
                            </div>
                        </div>
                        <div class="journal-list">
                            <div><img src="../assets/qikan8.jpg" alt=""></div>
                            <div class="journal-info">
                                <div><Icon type="md-list-box" size="22" />Educational Research Review</div>
                                <div><Icon type="md-time" size="16" /> ISSN：1747-938X</div>
                                <div><Icon type="ios-keypad" size="16" /> 复合影响因子：6.962</div>
                                <div><Icon type="ios-keypad" size="16" /> 自引量：1257</div>
                                <div><Icon type="ios-keypad" size="16" /> 载文量：110</div>
                            </div>
                        </div>
                        <div class="journal-list">
                            <div><img src="../assets/qikan9.jpg" alt=""></div>
                            <div class="journal-info">
                                <div><Icon type="md-list-box" size="22" />Internet and Higher Education</div>
                                <div><Icon type="md-time" size="16" /> ISSN：1096-7516</div>
                                <div><Icon type="ios-keypad" size="16" /> 复合影响因子：6.566</div>
                                <div><Icon type="ios-keypad" size="16" /> 自引量：1896</div>
                                <div><Icon type="ios-keypad" size="16" /> 载文量：111</div>
                            </div>
                        </div>
                        <div class="journal-list">
                            <div><img src="../assets/qikan10.jpg" alt=""></div>
                            <div class="journal-info">
                                <div><Icon type="md-list-box" size="22" />COMPUTERS & EDUCATION</div>
                                <div><Icon type="md-time" size="16" /> ISSN：0360-1315</div>
                                <div><Icon type="ios-keypad" size="16" /> 复合影响因子：5.296</div>
                                <div><Icon type="ios-keypad" size="16" /> 自引量：9093</div>
                                <div><Icon type="ios-keypad" size="16" /> 载文量：718</div>
                            </div>
                        </div>
                        <div class="journal-list">
                            <div><img src="../assets/qikan11.jpg" alt=""></div>
                            <div class="journal-info">
                                <div><Icon type="md-list-box" size="22" />AMERICAN EDUCATIONAL RESEARCH JOURNAL</div>
                                <div><Icon type="md-time" size="16" /> ISSN：0002-8312</div>
                                <div><Icon type="ios-keypad" size="16" /> 复合影响因子：5.013</div>
                                <div><Icon type="ios-keypad" size="16" /> 自引量：1287</div>
                                <div><Icon type="ios-keypad" size="16" /> 载文量：218</div>
                            </div>
                        </div>
                        <div class="journal-list">
                            <div><img src="../assets/qikan12.png" alt=""></div>
                            <div class="journal-info">
                                <div><Icon type="md-list-box" size="22" />Review of Research in Education</div>
                                <div><Icon type="md-time" size="16" /> ISSN：0091-732X</div>
                                <div><Icon type="ios-keypad" size="16" /> 复合影响因子：4.667</div>
                                <div><Icon type="ios-keypad" size="16" /> 自引量：417</div>
                                <div><Icon type="ios-keypad" size="16" /> 载文量：71</div>
                            </div>
                        </div>
                    </div>
                </TabPane>
            </Tabs>

            <div class="journal-table" id="page-content">
                <div v-if="searchKey" style="text-align:left;margin-bottom:10px;font-size:15px;color:#999">搜索结果：> {{tabIndex=='0'?'CSSCI期刊':'SSCI期刊'}}  > {{searchKey}}</div>
                <Table v-if="tabIndex=='0'" border :columns="columns1" :data="data1_filter.slice((pageNumber-1)*8,pageNumber*8)" :loading="loading" @on-filter-change="filterChange" @on-sort-change="sortChange"></Table>
                <Table v-if="tabIndex=='1'" border :columns="columns2" :data="data2_filter.slice((pageNumber-1)*8,pageNumber*8)" :loading="loading" @on-filter-change="filterChange" @on-sort-change="sortChange"></Table>
                <Page  class="pages" :total="totalPages"  :current="pageNumber"  :page-size="8" @on-change="getPageInfo" />
            </div>
        </div>
    </div>
</template>

<script>
import search from '../components/topSearch.vue'
import JournalCssciService from "@/service/journal_cssci";
import JournalSsciService from "@/service/journal_ssci";
import utils from "../utils/utils"
export default {
    components:{search},
    data(){

        //bug: 搜索完后筛选再搜索会出现筛选按钮不重置问题

        return{
            searchKey:'',
            loading:true,
            tabIndex:"0", //类别导航栏索引
            pageNumber:1, //当前页码
            data1: [],
            data1_filter:[],
            data1_filter_key:{ //筛选键值
                kan_fa_zhou_qi:[],
                zi_ling_yu:[]
            },
            columns1: [{
                        title: '期刊名称',
                        key: 'ming_cheng',
                        width:250,
                        render:(h,params)=>{
                            return h('span',{
                                domProps:{
                                    innerHTML:utils.highlightHTML(params.row.ming_cheng,this.searchKey)
                                }
                            });
                        }
                    },
                    {
                        title: '类型',
                        key: 'lei_xing',
                        width:100,
                    },
                    {
                        title: '刊物周期',
                        key: 'kan_fa_zhou_qi',
                        width:120,
                        filters: [
                            {
                                label: '月刊',
                                value: '月刊'
                            },
                            {
                                label: '季刊',
                                value: '季刊'
                            },
                            {
                                label: '年刊',
                                value: '年刊'
                            },
                            {
                                label: '半月刊',
                                value: '半月刊'
                            },
                            {
                                label: '双月刊',
                                value: '双月刊'
                            },
                            {
                                label: '半年刊',
                                value: '半年刊'
                            }
                        ],
                        filterMethod: (value, row)=> {
                           return true;
                        },
                    },
                    {
                        title: 'ISSN',
                        key: 'issn',
                        width:150,
                    },
                    {
                        title: '大领域',
                        key: 'da_ling_yu',
                        width:100,
                    },
                    {
                        title: '子领域',
                        key: 'zi_ling_yu',
                        width:180,
                        filters: [
                            {
                                label: '中等教育',
                                value: '中等教育'
                            },
                            {
                                label: '学前教育',
                                value: '学前教育'
                            },
                            {
                                label: '教育技术理论',
                                value: '教育技术理论'
                            },
                            {
                                label: '教育理论与教育管理',
                                value: '教育理论与教育管理'
                            },
                            {
                                label: '特殊教育',
                                value: '特殊教育'
                            },
                            {
                                label: '高等教育',
                                value: '高等教育'
                            }
                        ],
                        filterMethod: (value, row)=> {
                           return true;
                        },
                    },
                    {
                        title: '综合影响影子',
                        key: 'zong_he_ying_xiang_yin_zi',
                        width:180,
                        sortable: 'custom'
                    },
                    {
                        title: '复合影响影子',
                        key: 'fu_he_ying_xiang_yin_zi',
                        width:180,
                        sortable: 'custom'
                    },
                    {
                        title: '载文量',
                        key: 'zai_wen_liang',
                        width:120,
                        sortable: 'custom'
                    },
            ],
            data2: [],
            data2_filter:[],
            data2_filter_key:{
                kan_wu_zhou_qi:[],
            },
            columns2:[{
                title: '期刊名称',
                key: 'ming_cheng',
                width:250,
                render:(h,params)=>{
                    return h('span',{
                        domProps:{
                            innerHTML:utils.highlightHTML(params.row.ming_cheng,this.searchKey)
                        }
                    });
                }
            },
            {
                title: '类型',
                key: 'lei_xing',
                width:100,
            },
            {
                title: '刊物周期',
                key: 'kan_wu_zhou_qi',
                width:120,
                filters: [
                    {
                        label: '月刊',
                        value: '月刊'
                    },
                    {
                        label: '季刊',
                        value: '季刊'
                    },
                    {
                        label: '年刊',
                        value: '年刊'
                    },
                    {
                        label: '半月刊',
                        value: '半月刊'
                    },
                    {
                        label: '双月刊',
                        value: '双月刊'
                    },
                    {
                        label: '半年刊',
                        value: '半年刊'
                    },
                    {
                        label: '一年1期',
                        value: '一年1期'
                    },
                    {
                        label: '一年2期',
                        value: '一年2期'
                    },
                    {
                        label: '一年3期',
                        value: '一年3期'
                    },
                    {
                        label: '一年4期',
                        value: '一年4期'
                    },
                    {
                        label: '一年5期',
                        value: '一年5期'
                    },
                    {
                        label: '一年6期',
                        value: '一年6期'
                    },
                    {
                        label: '一年7期',
                        value: '一年7期'
                    },
                    {
                        label: '一年8期',
                        value: '一年8期'
                    },
                    {
                        label: '一年9期',
                        value: '一年9期'
                    },
                    {
                        label: '三年1期',
                        value: '三年1期'
                    },
                ],
                filterMethod: (value, row)=> {
                    return true;
                },
            },
            {
                title: 'ISSN',
                key: 'issn',
                width:150,
            },
            {
                title: '大领域',
                key: 'da_ling_yu',
                width:150,
            },
            {
                title: '影响影子',
                key: 'ying_xiang_yin_zi',
                width:180,
                sortable: 'custom'
            },
            {
                title: 'CiteScore',
                key: 'cite_score',
                width:180,
                sortable: 'custom'
            },
            {
                title: '引用量',
                key: 'yin_yong',
                width:120,
                sortable: 'custom'
            },{
                title: '被引用量',
                key: 'bei_yin_yong_lv',
                width:120,
                sortable: 'custom'
            }]
        }
    },
    computed:{
        totalPages(){
            if(this.tabIndex=='0'){
                return this.data1_filter.length;
            }else{
                return this.data2_filter.length;
            }
            
        }
    },
    mounted(){
        this.$Loading.finish();
        this.loadCssciBox();
        this.loadSsciBox();
    },
    methods:{
        //这里直接请求了所有的数据，因为数据量很小，没必要分页
        loadCssciBox() {
            this.loading = true;
            JournalCssciService.getJournalCssciList({
                order: [["is_shouye", 1]],
                pageSize: 999,
            }).then((res) => {
                this.data1 = res.data;
                this.data1_filter = res.data;
                this.$route.params.searchKey&&(this.searchKey=this.$route.params.searchKey)&&this.search();
                setTimeout(() => {
                    this.loading = false;
                }, 600);
            });
        },
        loadSsciBox() {
            this.loading = true;
            JournalSsciService.getJournalSsciList({
                pageSize: 999,
            }).then((res) => {
                console.log(res)
                setTimeout(() => {
                    this.loading = false;
                    this.data2 = res.data;
                    this.data2_filter = res.data;
                }, 600);
            });
        },
        getPageInfo(currenIndex){
            console.log(currenIndex);
            this.pageNumber = currenIndex;
        },
        //筛选函数
        filterChange(row){
            if(this.tabIndex=='0'){
                this.data1_filter_key[row.key] = row._filterChecked;
                
                this.data1_filter = this.data1.filter((item)=>{
                    if(this.data1_filter_key.kan_fa_zhou_qi.length==0) return true;
                    for(let filter_item of this.data1_filter_key.kan_fa_zhou_qi){
                        if(!item.kan_fa_zhou_qi) return false; 
                        if(item.kan_fa_zhou_qi==filter_item) return true;
                    }
                    return false;
                })

                this.data1_filter = this.data1_filter.filter((item)=>{
                    if(this.data1_filter_key.zi_ling_yu.length==0) return true;
                    for(let filter_item of this.data1_filter_key.zi_ling_yu){
                        if(!item.zi_ling_yu) return false; 
                        if(item.zi_ling_yu==filter_item) return true;
                    }
                    return false;
                })
            }else{
                this.data2_filter_key[row.key] = row._filterChecked;

                this.data2_filter = this.data2.filter((item)=>{
                    if(this.data2_filter_key.kan_wu_zhou_qi.length==0) return true;
                    for(let filter_item of this.data2_filter_key.kan_wu_zhou_qi){
                        if(!item.kan_wu_zhou_qi) return false; 
                        if(item.kan_wu_zhou_qi==filter_item) return true;
                    }
                    return false;
                })
            }
        },
        //排序函数
        sortChange(row){
            if(this.tabIndex=='0'){
                if(row.order == 'desc'){
                    this.data1_filter = this.data1_filter.sort((a,b)=>{
                        return a[row.key] - b[row.key];
                    });
                }else{
                    this.data1_filter = this.data1_filter.sort((a,b)=>{
                        return b[row.key] - a[row.key];
                    });
                }
            }else{
                if(row.order == 'desc'){
                    this.data2_filter = this.data2_filter.sort((a,b)=>{
                        return a[row.key] - b[row.key];
                    });
                }else{
                    this.data2_filter = this.data2_filter.sort((a,b)=>{
                        return b[row.key] - a[row.key];
                    });
                }
            }
        },
        //重置
        reset(){
            this.data1_filter = this.data1.concat();
            this.data2_filter = this.data2.concat();
            this.data1_filter_key={ //筛选键值
                kan_fa_zhou_qi:[],
                zi_ling_yu:[]
            },
            this.data2_filter_key={
                kan_wu_zhou_qi:[],
            },
            this.pageNumber = 1;
            this.search();
        },
        //搜索
        search(){
            this.data1_filter = this.data1.concat();
            this.data2_filter = this.data2.concat();
            this.data1_filter_key={ //筛选键值
                kan_fa_zhou_qi:[],
                zi_ling_yu:[]
            },
            this.data2_filter_key={
                kan_wu_zhou_qi:[],
            },
            this.pageNumber = 1;

            !this.$route.params.searchKey&&document.querySelector("#page-content").scrollIntoView(false);

            if(this.tabIndex=='0'){
                this.data1_filter = this.data1.filter((item)=>{
                    return item.ming_cheng.toLowerCase().includes(this.searchKey.toLowerCase()); 
                });
            }else{
                this.data2_filter = this.data2.filter((item)=>{
                    return item.ming_cheng.toLowerCase().includes(this.searchKey.toLowerCase()); 
                })
            }
        }
    }
}
</script>
<style lang="scss" scoped>
.journal{
    .search-div{
        padding-top: 120px;
        background: linear-gradient(-150deg,#1c4f48,#28354b);
        padding-bottom: 100px;
        display: flex;
        flex-direction: row;
        justify-content: center;
        align-items: center;
        .search-logo{
            height: 50px;
            width: 70px;
            background: var(--single-color);
            border:1px solid #fff;
        }
        /deep/ .ivu-icon-md-search{
            margin-top: 10px;
        }
    }
    .search{
        width: 60%;
        /deep/ input{
            border-radius: 0;
            font-size: 15px;
            border: 1px solid white !important;
            height: 50px;
        }
        /deep/ .ivu-input-search{
            border-radius: 0;
            background: var(--single-color) !important;
            border: 1px solid white !important;
            outline: none;
            overflow: hidden;
        }
    }
    .journal-container{
        padding: 0px 5%;
        /deep/ .ivu-tabs-nav{
            // width: 100%; 
            position: relative;
            left: 50%;
            transform: translateX(-50%);
            padding: 15px 0px;
            font-size: 16px;
            color: #aaa;
        }
        /deep/ .ivu-tabs-ink-bar{
            height: 3px;
        }
        /deep/ .ivu-tabs-nav .ivu-tabs-tab-active{
            color: #333;
        }
        /deep/ .ivu-tabs-nav .ivu-tabs-tab:hover{
            color: #333;
        }
        .journal-content {
            margin-top: 50px;
            .journal-list {
                float: left;
                position: relative;
                overflow: hidden;
                display: flex;
                flex-direction: row;
                padding: 15px 15px;
                margin-left: 20px;
                width: 31%;
                background: white;
                transition: all 0.4s ease;
                cursor: pointer;
                box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12);
                margin-bottom: 50px;
                border-radius: 10px;
                img {
                    margin-right: 15px;
                    width: 110px;
                    height: 165px;
                    object-fit: cover;
                }
                >div:nth-of-type(2) {
                    display: flex;
                    flex-direction: column;
                    justify-content: space-around;
                }
                .journal-info {
                    text-align: left;
                    >div {
                        font-size: 13px;
                        color: #888;
                    }
                    >div:nth-of-type(1) {
                        font-size: 18px;
                        font-weight: bold;
                        color: #333;
                    }
                }
            }
        }
    }
    .journal-table{
        /deep/ .ivu-table-overflowX::-webkit-scrollbar {
            width: 5px;  
            height:8px;     
            background-color:#eee;
        }
        /deep/ .ivu-table-overflowX::-webkit-scrollbar-thumb {
            border-radius: 10px;  
            background-color:#ddd; 

        }
    }
    .pages{
        margin-top: 40px;
        margin-bottom: 40px;
    }
}
@media (max-width:1060px) {
    .journal-container {
        padding: 15px 15px;

        .journal-content {
            display: flex;
            flex-direction: column;
            margin-top: 10px !important;
            .journal-list {
                width: 100% !important;
                margin-left: 0% !important;
                margin-bottom: 15px !important;
            }
        }
    }
    
    /deep/ .ivu-table-overflowX::-webkit-scrollbar {
        width: 5px;  
        height:3px !important;     
        background-color:#eee;
    }
    /deep/ .ivu-table-overflowX::-webkit-scrollbar-thumb {
        border-radius: 10px !important;  
        background-color:#ddd; 

    }
    .search-div{
        .search-logo{
            height: 40px !important;
            width: 40px !important;
        }
        /deep/ .ivu-icon-md-search{
            margin-top: 5px !important;
        }
    }
    .search {
        width: 80% !important;
        /deep/ input {
            height: 40px !important;
            font-size: 14px !important;
        }
    }
}
</style>